“Bold - Responsive Blogger Template” Documentation by “Bthemez” v1.0

Created: 20/09/2014
By: Bthemez
Email: bthemez@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email. Thanks so much!

Table of Contents

  1. Installation
  2. Upload Logo
  3. Setting up the menu
  4. Author Pic in Sidebar
  5. Edit Author Info

  1. Installation - top

    2. Now you have Bold Blogger Template. You Can Follow This Steps To Upload Your Blogger Template To Blogger Platform. First Login to your Blogger DashBoard by Using Your Google Username And Password from Here.

    Then follow these steps:

    1. On Blogger Dashboard Click Template.

    2. Click Backup/Restore button (Top Right).

    3. Click Choose ( Browse..) File button. Find where the “Bold-Blogger-Template.xml” file location.

    4. Then Click Upload.

    Note: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work

    Access your blog Layout > click Edit link on Header widget

    In Configure Header window, input you Blog Title and Blog Description. If you want to upload your image logo, make sure checked Instead of title and description, then click Choose File and locate your logo file. And click Save button to finish.

    To Edit Top Menu in this theme you can follow this step:

    1. On Blogger Dashbord Click Template
    2. Click Edit HTML
    3. Find this Code :

      <div class="headtitle">
<div class="intro-line"></div>
<h1>Hello</h1>
<h1 class="small">Welcome to Blog</h1>
<div class="intro-line"></div>
<p>This Awesome Blogger Template is Brought To You By Bthemez, Let's be friends and spread the love <br>together in the world. #nohomo  :P <br>Join us on</p>
<div class="social-intro">
<ul>
<li><a href="https://twitter.com/@bthemez"><img alt="" src="http://2.bp.blogspot.com/-THr7p8v_Wzo/VB2_Z_jOgBI/AAAAAAAAAV0/G-zcTmrp6_k/s1600/icn-twitter-intro.png"></a></li>
<li><a href="https://www.facebook.com/bthemez"><img alt="" src="http://1.bp.blogspot.com/-vhNDU4-3Ngc/VB2_YjG8k8I/AAAAAAAAAVg/vc2OpEHBavw/s1600/icn-facebook-intro.png"></a></li>
<li><a href="https://plus.google.com/+Bthemezsite"><img alt="" src="http://4.bp.blogspot.com/-QdHCqxgA3x8/VB2_YoVmERI/AAAAAAAAAVc/Hvi7jKKwl5A/s1600/icn-gplus-intro.png"></a></li>
<li><a href="#"><img alt="" src="http://1.bp.blogspot.com/-6JSMaAR5OUM/VB2_Zmg5_KI/AAAAAAAAAVs/TrvmdtLZbYI/s1600/icn-linkedin-intro.png"></a></li>
<li><a href="#"><img alt="" src="http://1.bp.blogspot.com/-Qxw_be-Fp3U/VB2_Yajr_7I/AAAAAAAAAVk/gTG-qwRmc78/s1600/icn-dribbble-intro.png"></a></li>
<li><a href="#"><img alt="" src="http://3.bp.blogspot.com/-ml2sSjfyjes/VB2_ankMhTI/AAAAAAAAAV4/58vXvtzBlUw/s1600/icn-vimeo-intro.png"></a></li>
</ul>
</div>
</div>

      To Edit Top Menu in this theme you can follow this step:

      1. On Blogger Dashbord Click Template
      2. Click Edit HTML
      3. (Top Menu) Scroll down and Find this Code :

               <ul class='menubar'> 
            <li> 
              <a href='#'> 
                Home 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                About 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Contact 
              </a> 
            </li> 
            <li> 
              <a href='#'> 
                Error Page 
              </a> 
            </li> 
          </ul>
      4. Change # with yours URL link
      To Edit Sticky Menu in this theme you can follow this step:

      1. On Blogger Dashbord Click Template
      2. Click Edit HTML
      3. (Top Menu) Scroll down and Find this Code :

        <nav>
        <ul class='slimmenu' id='navigation'>
            <li><a href='#'><i class='fa fa-home fa-lg'/></a></li>
            <li><a href='#'>Download</a></li>
            <li><a href='#'>Premium Version</a></li>
            
            <li><a href='#'>Custom Theme</a></li>
            
            <li>
                <a href='#'>Contact</a>
                <ul>
                    <li><a href='#'>Link 1</a></li>
                    <li><a href='#'>Link 2</a></li>
                    <li><a href='#'>Link 3</a></li>
                </ul>
           </li>
        </ul>
    </nav>
      4. Change # with yours URL link

    4. Change Author Pic in Sidebar - top

      5. To Edit Sidebar Author Pic in this theme you can follow this step:

      1. On Blogger Dashbord Click layout
      2. Go to Author Info Widget Click Edit
      3. Add The Following code in widget

      4. Change Image Url with yours URL and text
      <div class="post-thumb clearfix">
    <figure class="featured-thumbnail thumbnail large">
        <div class="hider-page" style="display: none;"></div>
        <a class="image-wrap image-popup-no-margins" href="http://1.bp.blogspot.com/-T7HmZhzM19k/VB3DnhkPjfI/AAAAAAAAAWM/HZ58XOJB5DI/s1600/scombs007.jpg" data-rel="Photo">
            <img src="http://1.bp.blogspot.com/-T7HmZhzM19k/VB3DnhkPjfI/AAAAAAAAAWM/HZ58XOJB5DI/s1600/scombs007.jpg" alt="photo" />
            <span class="zoom-icon"></span>
        </a>
    </figure>
    <div class="clear"></div>
</div>
<p>Hi, I am author Bold Blog.This blog is to provide you with daily outfit ideas and share my personal style.</p>

    5. Edit Author Info at the Post Page - top

      6. To Edit AUTHOR DESCRIPTION ( post page )in this theme you can follow this step:

      1. On Blogger Dashbord Click Template
      2. Click Edit HTML
      3. (Top Menu) Scroll down and Find this Code :

        <article class='author-wrapper'>

        <div class='large-12 column'>
            <h2 class='fword'><span class='fwstyle'>ABOUT</span>ME</h2>
        </div>
        <div class='media'>

            <div class='about_img'>

                <script src='/feeds/posts/default?alt=json-in-script&amp;callback=authorshow'/>

            </div>

            <p>Hi all. This is deepak from Bthemez. We&#39;re providing content for Bold site and we&#8217;ve been in internet, social media and affiliate for too long time and its my profession. We are web designer &amp; developer living India! What can I say, we are the best..</p>

        </div>

        <div class='post-footer'>

            <div class='pull-left'>

                <a class='readmore' href='#'>View all posts [..]</a>

            </div>

            <div class='pull-right'>                

                <div class='social'>

                    <span><a href='#' title=''><i class='fa fa-facebook'/></a></span>

                    <span><a href='#' title=''><i class='fa fa-twitter'/></a></span>

                    <span><a href='#' title=''><i class='fa fa-pinterest'/></a></span>

                    <span><a href='#' title=''><i class='fa fa-linkedin'/></a></span>

                    <span><a href='#' title=''><i class='fa fa-youtube'/></a></span>

                    <span><a href='#' title=''><i class='fa fa-google-plus'/></a></span>

                </div>                        

            </div>

        </div>

    </article>
      4. Replace this text and social icon links with your owns

       

      Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

      Go To Table of Contents